/**
 * 学习目标：useState的使用限制
 * 原理：useState 的 更新过程，其实是内部按顺序，记录了上一次的值返回来，要严格按照上次执行顺序
 * 注意事项：
 * 1. 💥💥一定要顶层调用(不能在循环，条件，嵌套中调用)
 * 2. 不能在普通函数中调用
 *    1. 组件可以使用
 *    2. useXxx(hook的命名方式)的函数可以调用
 * 
    0: count 100  count 101
    1: msg 'msg'  count 'msg'
 */
import React, { useState } from 'react';

// 2. 组件和useXxx(hook的命名方式)的函数可以调用
// function useHome() {
//   const [home, setHome] = useState('home');
// }

// 2. 普通函数，不能使用 useState()
// function useHome1() {
//   const [home, setHome] = useState('home');
// }

function App() {
  console.log('我是App，执行了');
  const [count, setCount] = useState(100);
  // 1. 💥💥一定要顶层调用(不能在循环，条件，嵌套中调用)
  // if (count <= 100) {
  //   const [msg, setMsg] = useState('msg');
  // }
  return (
    <>
      我是App - {count}
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点我修改 count{' '}
      </button>
    </>
  );
}
export default App;
